<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			<view class="desc-rule-page relative">
				<comDetailNavigateBack :title="ruleTitle"/>
				<view class="desc-rule-box relative" :style="{height: 'calc(100vh - ' + commonNavHeight + ')',}">
					<view class="desc-rule-view margin-auto relative">
						<comEmptyData v-if="!ruleContent" />
						<comPlaceImage
							v-else
							:isOverHide="false"
							class="img"
							:lazyLoad="true"
							:src="ruleContent"
							mode="widthFix"></comPlaceImage>
					</view>
				</view>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	import { getContentHomeApi } from '@/setupproject/INTERFACE';
	
	export default {
		name: 'descRulePage',
		data() {
			return {
				ruleTitle: '',
				ruleContent: '',
			}
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		onLoad({ruleType, ruleTitle}) {
			this.ruleTitle = ruleTitle;
			this.ruleContentGetFun(ruleType);
		},
		methods: {
			ruleContentGetFun(ruleType) {
				getContentHomeApi({
					type: ruleType
				}).then((res) => {
					this.ruleContent = res.data.content_image;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.desc-rule-page {
		.desc-rule-box{
			width: 100%;
			.desc-rule-view {
				width: 750rpx;
				height: 100%;
				overflow-y: auto;
				.img {
					width: 100%;
				}
			}
		}
	}
</style>
